<style lang="scss" scoped>
    .mshop-search {
        border: .4em solid #eee;
        background-color: #F4EFEF;

        .main {
            $fontSize: 14px;
            border-radius: .2em;
            background-color: white;
            $iconSize: 1.2em;
            position: relative;
            font-size: $fontSize;
            transition: all .2s ease;

            .icon {
                width: $iconSize;
                height: $iconSize;
                position: absolute;
                top: .4em;
            }

            .icon-search {
                left: .5em;
                background: url('../../assets/search.png') no-repeat;
                background-size: $iconSize;
            }

            .icon-cancel {
                right: .5em;
                background: url('../../assets/delete.png') no-repeat;
                background-size: $iconSize;
            }

            .search {
                outline: none;
                width: 100%;
                height: 2em;
                font-size: $fontSize;
            }

            .search_cancel {
                display: inline-block;
                width: 2em;
                position: absolute;
                top: .2em;
                right: -2.5em;
            }

            .widget {
                position: absolute;
                display: flex;
                background-color: white;
                flex-wrap: nowrap;
                align-items: center;
                top: 0.2em;
                left: 0;
                margin: 0 $iconSize + 1em;
                z-index: 100;
                max-width: 90%;
                overflow: auto;
                white-space: nowrap;

                .label {
                    background-color: #999;
                    color: white;
                    font-size: $fontSize;
                    margin: 0 .2em;
                    padding: 0 .3em;
                    border-radius: .2em;
                    display: flex;

                    .label-cancel {
                        padding: 0 .2em 0 .6em;
                        position: relative;
                        bottom: .1em;
                    }
                }
            }
        }

        .focusing {
            margin-right: 3em;
        }

    }
</style>

<template>
    <div class="mshop-search">
        <div class="main" :class="{'focusing': focusing}">
            <i class="icon icon-search" ></i>
            <input
                :style="{'paddingLeft': labels_length + 'px'}"
                @keydown.enter="enter"
                @keydown.delete="input_delete"
                @input="input"
                @focus="focus"
                @blur="blur"
                type="search"
                class='search'
                autocomplete="off"
                required v-model="value"
                :placeholder="placeholder" />

            <i class="icon icon-cancel" v-show="focusing && value" @mousedown.prevent="value = ''"></i>

            <label class="search_cancel" v-show="focusing" @click="$el.blur()">取消</label>

            <div class="widget" v-show="labels.length > 0" >
                <div class="wrapped" v-for="label in labels" @click.prevent.stop="cancelLabel($index)">
                    <div class="label" v-if="label" track-by="$index">
                        <label class="label-value" >{{ label }}</label>
                        <i class="label-cancel">x</i>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    export default {
        props: {
            placeholder: {
                default: '搜索'
            },
            realTime: {
                default: false
            },
            action: {
                type: Function,
                required: true
            }
        },
        data: () => ({ value: '', focusing: false, labels: []}),
        computed: {
            labels_length () {
                const length = this.labels.length;
                if (length <= 0) {
                    const style = window.getComputedStyle(
                        this.$el.querySelector('input.search'));
                    const fontSize = style.fontSize || '14px';

                    return parseInt(fontSize) * 2.2;
                }

                const widget = this.$el.querySelector('.widget');

                return widget.offsetWidth + widget.offsetLeft;
            }
        },
        methods: {
            focus () {
                this.focusing = true;
            },
            blur () {
                this.focusing = false;
            },
            cancelLabel (index) {
                this.labels.splice(index, 1);
                this.do_search();
            },
            enter () {
                this.do_search();
            },
            do_search (cancel_blur) {
                const value = this.value.trim()
                if (value) {
                    this.labels.push(value);
                }

                this.value = '';
                this.action.call(null, this.labels);

                if (!cancel_blur) {
                    this.$nextTick(() => {
                        this.$el.querySelector('input').blur();
                    });
                }
            },
            input_delete () {
                if (!this.value && this.labels.length > 0) {
                    this.labels.pop();
                    this.do_search(true);
                }
            },
            input () {
                if (this.realTime) {
                    this.do_search();
                }
            }
        }
    }
</script>
